<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单信息</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleBack">返回列表</el-button>
      </div>
      
      <!-- 订单基本信息 -->
      <el-descriptions title="订单基本信息" :column="2" border>
        <el-descriptions-item label="订单编号">{{ orderInfo.orderSn }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag :type="statusTypeMap[orderInfo.status]">
            {{statusMap[orderInfo.status]}}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ orderInfo.createTime }}</el-descriptions-item>
        <el-descriptions-item label="支付时间">{{ orderInfo.paymentTime }}</el-descriptions-item>
        <el-descriptions-item label="发货时间">{{ orderInfo.deliveryTime }}</el-descriptions-item>
        <el-descriptions-item label="完成时间">{{ orderInfo.receiveTime }}</el-descriptions-item>
      </el-descriptions>

      <!-- 收货信息 -->
      <el-descriptions title="收货信息" :column="1" border class="margin-top">
        <el-descriptions-item label="收货人">{{ orderInfo.receiverName }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ orderInfo.receiverPhone }}</el-descriptions-item>
        <el-descriptions-item label="收货地址">
          {{orderInfo.receiverProvince}}{{orderInfo.receiverCity}}{{orderInfo.receiverDistrict}}{{orderInfo.receiverDetailAddress}}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 商品信息 -->
      <div class="margin-top">
        <div class="title">商品信息</div>
        <el-table :data="orderInfo.orderItems" border>
          <el-table-column label="商品图片" width="120" align="center">
            <template #default="scope">
              <el-image :src="scope.row.pic" :preview-src-list="[scope.row.pic]" class="product-img"/>
            </template>
          </el-table-column>
          <el-table-column label="商品信息">
            <template #default="scope">
              <div class="product-name">{{scope.row.productName}}</div>
              <div class="product-sku" v-if="scope.row.spData">{{scope.row.spData}}</div>
            </template>
          </el-table-column>
          <el-table-column label="单价" prop="salePrice" width="120" align="center">
            <template #default="scope">
              ￥{{scope.row.salePrice}}
            </template>
          </el-table-column>
          <el-table-column label="数量" prop="quantity" width="120" align="center"/>
          <el-table-column label="小计" width="120" align="center">
            <template #default="scope">
              ￥{{scope.row.salePrice * scope.row.quantity}}
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 费用信息 -->
      <el-descriptions title="费用信息" :column="1" border class="margin-top">
        <el-descriptions-item label="商品总额">￥{{ orderInfo.totalAmount }}</el-descriptions-item>
        <el-descriptions-item label="运费">￥{{ orderInfo.freightAmount }}</el-descriptions-item>
        <el-descriptions-item label="实付金额">
          <span class="amount">￥{{ orderInfo.payAmount }}</span>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 操作记录 -->
      <div class="margin-top">
        <div class="title">操作记录</div>
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in orderLogs"
            :key="index"
            :timestamp="activity.createTime">
            {{activity.operateMan}} {{activity.note}}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getOrder } from '@/api/order'

const route = useRoute()
const router = useRouter()

const orderInfo = ref({})
const orderLogs = ref([])

// 状态映射
const statusMap = {
  0: '待付款',
  1: '待发货',
  2: '已发货',
  3: '已完成',
  4: '已关闭'
}

// 状态样式映射
const statusTypeMap = {
  0: 'info',
  1: 'warning',
  2: 'primary',
  3: 'success',
  4: 'danger'
}

/** 获取订单详情 */
function getOrderDetail(orderId) {
  getOrder(orderId).then(response => {
    orderInfo.value = response.data
    orderLogs.value = response.data.orderLogs || []
  })
}

/** 返回列表 */
function handleBack() {
  router.push('/orders/order')
}

onMounted(() => {
  const orderId = route.query.orderId
  if (orderId) {
    getOrderDetail(orderId)
  }
})
</script>

<style scoped>
.margin-top {
  margin-top: 20px;
}
.title {
  margin-bottom: 10px;
  font-weight: bold;
}
.product-img {
  width: 80px;
  height: 80px;
}
.product-name {
  font-size: 14px;
  margin-bottom: 5px;
}
.product-sku {
  font-size: 12px;
  color: #999;
}
.amount {
  color: #f56c6c;
  font-weight: bold;
  font-size: 18px;
}
</style> 